<template>
  <div class="information">
       <div class="information-img">
           <img src="../../assets/image/information.png" alt="">
       </div>
       <div class="information-all">
           <div class="information-nav">
                <p>
                    <span>首页></span> 
                     <span class="span-information">新闻资讯</span>
                </p>
           </div>
       </div>
       
       <div class="content">
        <div class="container">
            <div class="container-left">
                <div class="container-one">
                    <p class="one-head">
                        <img src="../../assets/image/information-1.jpg" alt="">
                    </p>
                    <div class="one-content">
                        <b>经纪商机构再添新力量，所剩名额屈指可数</b><br/>
                        <span class="span-one" >
                            经纪商机构再添新力量，所剩名额屈指可数据行业有关人士透露，
                            讯丰数字管理公司于12月16日再次与8加经纪商机构签订了合作协议，
                            达成共识。截止目前为止，首批经纪商招募所剩名额屈指可数。讯丰
                            数字资产管理公司自成立以来，一直秉承着数字资产交易合规合...
                            <span class="span-two">【详情】</span>
                        </span>
                            <p class="one-time">
                            <img src="../../assets/image/time.jpg" alt="">
                            </p>
                            <router-link tag="p" to="details" class="one-foot">
                                阅读全文>>
                            </router-link>
                    </div>
                </div>
                <div class="container-two" v-for="(item,index) in 3" :key="index">
                    <p class="two-p"><img src="../../assets/image/1.png" alt=""></p>
                    <div class="two-right">
                        <div>
                            <b>经济商机构再添新力量，所剩名额屈指可数</b><br/>
                            <span class="span-one" style="line-height:1.5;">
                                        经济商机构再添新力量，所剩名额屈指可数据行业有关人士透露，
                                        讯丰数字管理公司于12月16日再次与8加经纪商机构签订了合作协议，
                                        达成共识。截止目前为止，首批经纪商招募所剩名额屈指可数。讯丰
                                        数字资产管理公司自成立以来，一直秉承着数字资产交易合规合...
                                        <span class="span-two">【详情】</span>
                                </span>
                                <p class="two-time">
                                    <img src="../../assets/image/time.jpg" alt="">
                                </p>
                                <p class="two-foot">
                                    阅读全文>>
                                </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="container-right">
                <div class="right-nav">
                   <p>浏览排行</p>
                   <p>+&nbsp;更多</p>
                </div>
                <div class="right-content">
                  <ul class="list">
                      <li v-for="(item,index) in data" :key="index">
                          <p>{{item.p}}</p>
                          {{item.font}}
                      </li>
                  </ul>
                </div>
                 <div class="right-nav">
                   <p>最新发布</p>
                   <p>+&nbsp;更多</p>
                </div>
                <div class="right-two">
                   <div class="two-content" v-for="(item,index) in 5" :key="index">
                      <div class="content-one" >
                        <p class="one-p"><img src="../../assets/image/2.png" alt=""></p>
                            <div class="content-right">
                                  <span class="span-one">
                                      经济商机构再添新力量，所剩名额屈指可数
                                  </span>
                                  <span style="font-size:14px; color:#dfdfdf;">
                                      经济商机构再添新力量，所剩名额屈指可数据行业有关...
                                      <span class="span-three">【详情】</span>
                                  </span>
                                  <span class="span-four">233</span>
                            </div>
                      </div>
                   </div>
                </div>
            </div>
        </div>
       </div>
       <div  class="font">
           <p class="font-btn" style="margin-right:28px;" @click="home">首页</p>
           <p class="font-img" @click="prevOrNext(-1)" aria-hidden="true"><img src="../../assets/image/left.png" alt=""></p>
             <li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item === currentPage}" @click="select(item)">
                <span>{{item}}</span>
            </li>
             <p class="font-img" @click="prevOrNext(1)" aria-hidden="true"><img src="../../assets/image/right.png" alt=""></p>
            <p class="font-btns" style="margin-left:28px;" @click="tail">尾页</p>
       </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
           data:[
                    {p:1,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:2,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:3,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:4,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:5,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:6,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:7,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:8,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:9,font:'经济商机构再添新力量，所剩名额屈指可数'},
                    {p:10,font:'经济商机构再添新力量，所剩名额屈指可数'}
           ],
           currentPage: 1,
           totalPages: 50
        }
    },
    methods: {
           select(n) {
                        if (n === this.currentPage) return 
                        if (typeof n === 'string') return 
                        this.currentPage = n
                    },
            prevOrNext (n) {
                            this.currentPage += n
                            this.currentPage < 1
                            ? this.currentPage = 1
                            : this.currentPage > this.totalPages
                            ? this.currentPage = this.totalPages
                            : null
                       },
            home(){
               if(this.currentPage!==1){
                   this.currentPage=1
               }
            },
            tail(){
               if(this.currentPage!==this.totalPages){
                   this.currentPage=this.totalPages
               }
            }
    },
     computed: {
        pages() {
             const c = this.currentPage
             const t = this.totalPages
             if (c <= 10) {
                return [1, 2, 3, 4, 5, 6, 7, 8, 9,'...']
              } else if (c >= t - 4) {
                    return [1, '...', t-7, t-6, t-5, t-4, t-3, t-2, t-1, t]
              } else {
                return [1, '...', c-3, c-2, c-1, c, c+1, c+2, c+3, t] 
            }
        }
    }
}

</script>
<style  scoped lang="scss">
.information{
    width:100%;
    .information-img{
        width:100%;
        height:200px;
        img{
            width:100%;
            height:100%;
        }
    }
    .information-all{
        width:100%;
        background: #fff;
       .information-nav{
            width:1200px;
            height:70px;
            border-bottom:1px solid #dddddd;
            margin:0 auto;
            p{  
                margin-left:35px;
                display:inline-block;
                font-size:15px;
                .span-information{
                    display: inline-block;
                    margin-top:44%;
                    color:#ff6600;
                }
            }
    
       }
    }
   
}
.container{
             width:1200px;
            margin:auto;
            margin-top:27px;
            display: flex;
            justify-content: space-around;
           .container-one{
               width:796px;
               height:471px;
               border:1px solid #ccc;
               background:#fff;
               .one-head{
                   height:215px;
                   img{
                       width:100%;
                       height:100%;
                   }
               }
               .one-content{
                   width:734px;
                   height:220px;
                   margin:15px  31px  20px 34px;
                   position: relative;
                  b{
                      font-size:18px;
                     font-weight:600;
                  }
                  .span-one{
                      display:inline-block;
                      width:100%;
                      margin-top:20px;
                      font-size:15px;
                      line-height:20px;
                      color:#b7b7b7;
                      letter-spacing:0.5px;
                    //   overflow:hidden; 
                    //     text-overflow:ellipsis;
                    //     display:-webkit-box; 
                    //     -webkit-box-orient:vertical;
                    //     -webkit-line-clamp:3; 
                 }
                  .span-two{
                      display:inline-block;
                      color:#ccc;
                  }
                  .one-time{
                      margin-top:50px;
                      img{
                          height:17px;
                      }
                  }
                  .one-foot{
                      width:174px;
                      height:55px;
                      color:#fff;
                      background:#ff9900;
                      font-size:16px;
                      text-align: center;
                      line-height:55px;
                      position:absolute;
                      bottom:22px;
                      right:26px;
                  }:hover{
                      cursor: pointer;
                  }
               }
           }
           .container-two{
               margin-top:10px;
               width:796px;
               height: 252px;
               background: #fff;
               display: flex;
               align-items: center;
               .two-p{
                   width:204px;
                   height:200px;
                   margin-left:22px;
                   display: flex;
                   img{
                       width:100%;
                       height:100%;
                   }
               }
               .two-right{
                   margin-left:26px;
                   width: 528px;
                   position: relative;
                   b{
                      font-size:18px;
                     font-weight:600;
                  }
                   .span-one{
                       display: inline-block;
                       margin-top:20px;
                      font-size:15px;
                      line-height:20px;
                      color:#b7b7b7;
                      letter-spacing:0.5px;
                    
                   }
                    .span-two{
                      display:inline-block;
                      color:#ccc;
                  }
                  .two-time{
                       margin-top:50px;
                      img{
                          height:17px;
                      }
                  }
                  .two-foot{
                      color:#ff6700;
                      font-size:14px;
                      position: absolute;
                      right:0;
                      bottom:3px;
                  }

                   
               }
           }
           .container-right{
               margin-left:22px;
               width:100%;
               height:533px;
               .right-nav{
                   width:100%;
                   height:53px;
                   border-bottom:1px solid #0f1930;
                   display:flex;
                   justify-content: space-between;
                   :nth-child(1){
                       width:170px;
                       height:53px;
                       border-bottom:2px solid #ff9a00;
                       font-size:22px;
                       font-weight:600;
                       line-height:53px;
                   }
                   :nth-child(2){
                       font-size:14px;
                       margin-top:30px;
                       color:#9a9a9a;
                   }
               }
               .right-content{
                   margin-top:20px;
                   width:384px;
                   height:468px;
                   .list{
                       width:100%;
                       color:#8c8c8c;
                       background:#fff;
                       li{
                            padding:14px 0 13px 0;
                           p{
                               margin:0 14px 0 22px;
                               display:inline-block;
                               width:19px;
                               height:19px;
                               text-align: center;
                               line-height:19px;
                               border-radius:50%;
                               background: #eeeeee;
                               color:#fff;
                               font-size:13px;
                           }
                       }
                       :nth-child(4){
                            color:#ff6700;
                       }
                       :nth-child(1){
                           p{
                               margin:0 14px 0 22px;
                               display:inline-block;
                               width:19px;
                               height:19px;
                               text-align: center;
                               line-height:19px;
                               border-radius:50%;
                               background: #fd6800;
                               color:#fff;
                               font-size:13px;
                           }
                       }
                       :nth-child(2){
                           p{
                               margin:0 14px 0 22px;
                               display:inline-block;
                               width:19px;
                               height:19px;
                               text-align: center;
                               line-height:19px;
                               border-radius:50%;
                               background: #fd6800;
                               color:#fff;
                               font-size:13px;
                           }
                       }
                       :nth-child(3){
                           p{
                               margin:0 14px 0 22px;
                               display:inline-block;
                               width:19px;
                               height:19px;
                               text-align: center;
                               line-height:19px;
                               border-radius:50%;
                               background: #fd6800;
                               color:#fff;
                               font-size:13px;
                           }
                       }
                      
                       
                   }
               }
           }
           .right-two{
               width:100%;
               height:648px;
               margin-top:15px;
               display:flex;
               flex-direction: column;
               align-items: center;
               .two-content{
                   width:100%;
                   height:123px;
                    background: #fff;
                   display: flex;
                   align-items: center;
                   margin-top:10px;
                   .content-one{
                        width:352px;
                        height:90px;
                        display: flex;
                        margin:0 auto;
                        .one-p{
                            width:90px;
                            height:90px;
                            margin-right:12px;
                            img{
                                width:90px;
                                height:90px;
                            }
                        }
                        .content-right{
                             width:254px;
                             display: flex;
                             flex-direction: column;
                             line-height:20px;
                             position: relative;
                            //  flex: 1;
                                .span-one{
                                        font-size:16px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                }
                                .span-three{
                                       color:#ccc;
                                      
                                }
                                .span-four{
                                    position: absolute;
                                    right:10px;
                                    bottom:0;
                                    color:#dfdfdf;
                                    font-size:14px;
                                }
                        }
                   }
               }
           }
}
.font{
        width:770px;
        height: 152px;
        margin:0 auto;
        // margin-top:65px;
        display: flex;
        flex-direction:row;
        align-items: center;
     .font-btn{
         width:63px;
         height:37px;
         background: #ff9a01;
         border-radius:5px;
         color:#fff;
         text-align: center;
         line-height: 37px;
         font-size:14px;
     }
     .font-btns{
         width:63px;
         height:37px;
         background: #666666;
         border-radius:5px;
         color:#fff;
         text-align: center;
         line-height: 37px;
         font-size: 14px;
     }
     .font-img{
         width:32px;
         height:32px;
        img{
            width:100%;
            height:100%;
        }
     }
     .page{
         width:25px;
         padding:0 11px;
         list-style:none;
         
     }
      .actived{
                color: #ff9902;
      }       
}

</style>